<script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia'
import axios from 'axios';
import { useNavStore } from '@/js/store';

const topNavStore = useNavStore();
const { nav, init } = storeToRefs(topNavStore)
// console.log('footer nav :', nav.value, nav, 123,nav.value.value,234, nav.value.value[1]);
// console.log('footer nav :', nav.value[1], nav, 123);

const addressHtml = ref('');
const getAddress = () => {


    const url = web_url + '/api/cms.article.single_by_title/' + 'footer_left';
    axios.get(url).then( ( res ) => {

		if( typeof res.data.article != 'undefined' ){

			addressHtml.value = res.data.article.content;
			// console.log( 'addressHtml:', addressHtml.value )

		}



        
    });  
	
}
getAddress();
</script>

<template>
	<div class="share">
		<!-- <span class="share__now">現在分享這個！
</span>
	<div class="share__social">
		<a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3a%2f%2fwww.komaspec.com%2fzh-hans%2f" class="share__social-item" target="_blank">
			<i class="icon icon--medium icon--grey icon-linkedin">
				<span class="sr-only">Share this page on Linkedin</span>
			</i>
		</a>
		<a href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fwww.komaspec.com%2fzh-hans%2f" class="share__social-item" target="_blank">
			<i class="icon icon--medium icon--grey icon-facebook-square">
				<span class="sr-only">Share this page on Facebook</span>
			</i>
		</a>
		<a href="http://twitter.com/share?url=https%3a%2f%2fwww.komaspec.com%2fzh-hans%2f" class="share__social-item" target="_blank">
			<i class="icon icon--medium icon--grey icon-twitter">
				<span class="sr-only">Share this page on Twitter</span>
			</i>
		</a>
		<a href="mailto:?subject=I wanted you to see this site&amp;body=Check out this site https%3a%2f%2fwww.komaspec.com%2fzh-hans%2f." class="share__social-item" target="_blank">
			<i class="icon icon--medium icon--grey icon-envelope">
				<span class="sr-only">Share this page through email</span>
			</i>
		</a>
	</div> -->
	</div>

	<footer class="footer">
		<div class="container footer__container">
			<div class="footer__main">
				<div class="footer__details">
					<div class="footer__details-upper">
						<a class="logo" href="/" title="德大海康">
							<img style="max-width:80%" class="lazy entered loaded" data-src="/src/assets/img/logo.jpg" alt="德大海康 Logo"
								data-extentions-extra-ocr-id="e3b0c44298fc1c149afbf4c8996fb924" data-ll-status="loaded"
								src="/src/assets/img/logo.jpg">
						</a>
						<div class="footer__details-text">

							<div v-html="addressHtml"></div>
							<!-- <p style="mso-margin-top-alt: auto; mso-margin-bottom-alt: auto; line-height: normal;"
								class="MsoNormal"><strong>中国工厂</strong></p>
							<p style="mso-margin-top-alt: auto; mso-margin-bottom-alt: auto; line-height: normal;"
								class="MsoNormal"><span
									style="font-family: 'NunitoSans-Light',serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #323232; letter-spacing: .4pt; mso-font-kerning: 0pt; mso-ligatures: none;">广州科玛特格机电电子产品制造有限公司
									地址：中国广东省广州市花都区花山镇菊花石大道288号，祈福（花山）工业城A1/A2/A7/A8厂房。</span></p>
							<p style="mso-margin-top-alt: auto; mso-margin-bottom-alt: auto; line-height: normal;"
								class="MsoNormal"><strong>越南工厂</strong></p>
							<p style="mso-margin-top-alt: auto; mso-margin-bottom-alt: auto; line-height: normal;"
								class="MsoNormal"><span
									style="font-family: 'NunitoSans-Light',serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #323232; letter-spacing: .4pt; mso-font-kerning: 0pt; mso-ligatures: none;">Komaspec
									Vietnam Co., Ltd., Factory F.C1, F.C2, Lot CN3-03, Non-Tariff Zone and Nam Dinh Vu
									Industrial Park (zone 1), belonging to Dinh Vu – Cat Hai Economic Zone, Dong Hai 2 Ward,
									Hai An District, Hai Phong City, Vietnam</span></p>
							<p style="mso-margin-top-alt: auto; mso-margin-bottom-alt: auto; line-height: normal;"
								class="MsoNormal"><strong>北美工厂</strong></p>
							<p style="mso-margin-top-alt: auto; mso-margin-bottom-alt: auto; line-height: normal;"
								class="MsoNormal"><span
									style="font-family: 'NunitoSans-Light',serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #323232; letter-spacing: .4pt; mso-font-kerning: 0pt; mso-ligatures: none;">EPKO
									Metal Inc., Boulevard Independencia No. 198-1, Col. Lote Bravo, Cd. </span>Juárez, C.P.
								32695, Chihuahua, Mexico</p> -->

						</div>
					</div>
					<div class="footer__socials">
						<span class="footer__socials-text"></span>
						<!-- 暂时隐藏，注册账号，并拿到链接后放开 -->
						<ul class="footer__socials-list" style="display:none">
							<li class="footer__socials-item">
								<a class="footer__socials-link" href="https://www.linkedin.com/company/2236395"
									target="_blank" rel="noopener">
									<i class="icon icon--medium icon-linkedin-circle">
										<span class="sr-only"></span>
									</i>
								</a>
							</li>
							<li class="footer__socials-item">
								<a class="footer__socials-link" href="https://www.instagram.com/komaspec" target="_blank"
									rel="noopener">
									<i class="icon icon--medium icon-instagram-circle">
										<span class="sr-only"></span>
									</i>
								</a>
							</li>
							<li class="footer__socials-item">
								<a class="footer__socials-link" href="https://www.facebook.com/KomaspecManufacturing"
									target="_blank" rel="noopener">
									<i class="icon icon--medium icon-facebook-circle">
										<span class="sr-only"></span>
									</i>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="footer__columns" >
					<div class="footer__column" v-for="item,index in nav" :key="index">
						<h3 class="footer__column-title">{{ item.title }}</h3>

						<ul class="footer__column-list">
							<li class="footer__column-item" v-for="child,c_index in item.children" :key="c_index">
								<a :href="child.link" class="footer__column-link">{{ child.title }}</a>
							</li>
							
						</ul>
					</div>
					
				</div>
			</div>
			<div class="footer__bottom">
				<ul class="footer__links" style="display: none;">
					<li class="footer__link-item">
						<a href="/zh-hans/general-terms-and-conditions/" class="footer__link">一般条款和条件</a>
					</li>
					<li class="footer__link-item">
						<a href="/zh-hans/privacy-policy/" class="footer__link">隐私政策</a>
					</li>
					<li class="footer__link-item">
						<a href="/zh-hans/refund-policy/" class="footer__link">退款政策</a>
					</li>
					<li class="footer__link-item">
						<a href="/zh-hans/platform-terms/" class="footer__link">平台条款</a>
					</li>
				</ul>
				<p class="footer__copyright">
					© 2025 青岛德大海康畜牧机械有限公司
					<a href="http://beian.miit.gov.cn" style="color: inherit;" target="_blank">鲁ICP备2025181541号-1</a>

				</p>
			</div>
		</div>
	</footer>


	<div class="modal micromodal-slide" id="video-modal" aria-hidden="true">
		<div class="modal__overlay" tabindex="-1" data-micromodal-close="">
			<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="video-modal-title"
				aria-describedby="video-modal-content">
				<button class="modal__close" aria-label="Close modal" aria-controls="modal__container1"
					data-micromodal-close=""></button>
				<div data-video-wrapper="">

				</div>
			</div>
	</div>
</div>
<div id="color-modal" class="modal" data-color-modal="">
	<div class="modal__overlay" data-micromodal-close="" tabindex="-1">
		<div class="modal__container">
			<div class="color-modal">
				<h1 class="color-modal__title" data-color-title=""></h1>
				<div class="color-modal__carousel-wrapper swiper">
					<div class="color-modal__carousel swiper-wrapper" data-color-modal-carousel=""></div>
					<i class="color-modal__prev icon-chevron-left" data-color-modal-carousel-prev=""></i>
					<i class="color-modal__next icon-chevron-right" data-color-modal-carousel-next=""></i>
					<div class="swiper-pagination"></div>
				</div>
				<a class="color-modal__dismiss" href="#" data-micromodal-close="">
					<i class="icon-times"></i>
				</a>
			</div>
		</div>
	</div>
</div></template>
